Visual Formatting Model - 定義、containing block - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 11

自我挑戰組

每天來點 CSS Specification系列第 11 篇

Visual Formatting Model - 定義、containing block

11th鐵人賽 css css specification

RURU Tseng

團隊好想工作室 v3.0

2019-09-26 12:17:14

1774 瀏覽

分享至

倘若不斷向深處扎根，就能茁壯成長 - RM

前言

今天主要會介紹 Visual Formatting Model 定義，以及每個元素所生成的 box 的 containing block。

瀏覽器與 visual formatting model

規範定義：
This chapter and the next describe thevisual formatting model: how user agents process the document tree for visual media .
規範直通車：
Visual formatting model

在 UA 解析 document 時，會遵守的計算規則便是 visual formatting model ，它決定了 document 的佈局規則，以及元素會生成零至多個 box 便遵守著定義的佈局規則，而若元素是 display: none 的狀態便不會進行渲染佈局，在規範中有敘述，visual formatting model 中主要有幾項重點：

元素的 box 類型及尺寸
box 的定位方法
box 間相互的關係
其他的外部資訊（viewport 大小、圖片自帶大小等等）

在 Visual Formatting Model 中，所有的元素主要有兩種類型，其中一種代表的是內容的 inline-level box 、一種代表的是區塊的 block-level box，以我們平常使用的元素來說，inline-level box 就有 <a>、<span>、<button>、<img>等等，它們本身像是內容。block-level box 則有 <header>、<main>、<section>、<footer> 等等，區分的方式可以透過它們的排列方式看見端倪，inline-level box 本身水平排列、block-level box 本身是一個接著一個垂直排列。

主要的 box 類型：

inline-level box
block-level box

而 box 之前有提到是 document 中的每個可以視覺化的元素所生成的一個矩形框 box，不同類型的 box 會遵守不同的上下文，block-level box 好比 <nav> 及 <footer> 像是元素產生了一個塊狀的盒子，並且在這個區域中可以放入新的 block-level box 內容以及 inline-level box 內容，這個涉及到 block-level box 本身可以產生新的佈局上下文如同 BFC、IFC、independent formatting context 等。

簡單來說，生成 box 的元素每個都有自己的 box 類型，而每個 box 依照不同的類型決定會參與什麼樣的 Formatting Context ， Formatting Context 可以想像成一組 box 在那種環境下會去依循的關係，之後會針對 Formatting Context 去做較為詳細的介紹。

containing block

規範定義：
In CSS2.1, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box “establishes” the containing block for its descendants. The phrase “a box’s containing block” means “the containing block in which the box lives,” not the one it generates.
規範直通車：
Visual formatting model

元素生成的 box 位置時常是跟隨著某個矩形去計算，CSS 將其定義為所謂的 containing block ，對於不同的情況下，通常我們說的包含塊是指每個 box 所參照的那個包含塊，包含塊分別為：

initial containing block：根元素的 containing block，在 html 中 root 表示 <html>
元素為 position: static、relative ，包含塊由最近的祖先元素生成，通常是元素上面生成 BFC、Block-containing box 的元素。
元素為 position: fixed，則 containing block 由 viewport 建立。
元素為 position: absolute 包含塊為最近的非 position: static 元素。

舉例來說，當我今天建立了如下的 HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Illustration of containing blocks</title>
    </head>
    <body id="body">
        <div id="div1">
        <p id="p1">This is text in the first paragraph...</p>
        <p id="p2">This is text <em id="em1"> in the
        <strong id="strong1">second</strong> paragraph.</em></p>
        </div>
    </body>
</html>

CSS 如下：

#div1 { position: absolute; left: 50px; top: 50px }
#em1  { position: absolute; left: 100px; top: 100px }

它們本身各自的包含塊以上述例子來說就像是：

html 對應初始包含塊，因為根元素在規範中會有個初始化的包含塊 initial containing block
body 對應 html，因為body 本身符合 position: static、relative ，包含塊由最近的祖先元素生成，通常是元素上面生成 BFC，以這個情況來說就是 html。
div1 對應初始包含塊，它本身為 position: absolute包含塊由最近的非 position: static 元素生成。
p1、p2 對應div1 ，它本身為 position: static、relative ，如同上述點二。
em1 對應初 div1，它本身為 position: absolute包含塊由最近的非 position: static 生成。
strong1 對應 em1 ，它本身為 position: static、relative ，如同上述點二。

但是在此提到的包含塊細節來自於 position Level 3，仍是 WD 草案階段，所以在細節及方向上都可能在進行變動，要注意這點呦～

結語

上述介紹的 containing block、及 Visual Formatting Model 本身有許多規則， containing block 講述 box 在定位時參照的定為基準 box，Visual Formatting Model 代表 UA 如何去解析 document 並呈現在視覺媒體上的一套邏輯規則，我們明天見～